<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('卡片列表')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-md-12 search-collapse" style="padding-bottom: 0px">
            <form id="formId">
                <div class="select-list">
                    <ul style="text-align: left">
                        <li>
                            <label style="width: 80px">日期：</label>
                            <input type="text" id="dateBegin" placeholder="yyyy-MM" autocomplete="off">
                        </li>
                        <li>
                            <label style="width: 80px">名称：</label>
                            <input type="text" name="na" id="name"/>
                        </li>
                        <li>
                            <label style="width: 80px">系统：</label>
                            <select name="sdSys" id="sdSys" th:with="type=${@baseSd.getItem('hos_sys')}">
                                <option value=""></option>
                                <option th:each="item : ${type}" th:text="${item.na}" th:value="${item.cd}"></option>
                            </select>
                        </li>
                        <li>
                            <label style="width: 80px"><span style="color: red">*</span>标签：</label>
                            <input type="hidden" id="treeId"/>
                            <input type="text" onclick="selectDeptTree()" id="treeName" readonly="true" required>
                        </li>
                        <li>
                            <label style="width: 80px">异常指标：</label>
                            <input type="checkbox" style="width:17px;height: 17px" id="checkboxQuery" value="1"/>
                        </li>
                        <li>
                            <label style="width: 80px">显示半年：</label>
                            <input type="checkbox" style="width:17px;height: 17px" id="sevenShow" value="1" />
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="refreshData()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div style="margin-top: 90px" id="shapeDiv">
        </div>
    </div>
</div>


<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<th:block th:include="include :: datetimepicker-js" />
</body>
</html>
<script>
    var dataSetData = {
        source: [
            ['日期', '指标值'],
            ['02-13', 40.3],
            ['02-14', 37.3],
            ['02-15', 43.3],
            ['02-16', 43.3],
            ['02-17', 83.1],
            ['02-18', 86.4],
            ['02-19', 72.4]
        ]
    };
    var simleLineoption = {
        title:{text:'门急诊人次'},
        dataset:dataSetData,
        xAxis: {
            type: 'category'
        },
        yAxis: {},
        series: [
            {
                name:'指标值',
                type: 'line'
            }
        ]
    };
    function selectDeptTree() {
        var options = {
            title: '选择上级',
            width: "380",
            url: "/base/label/tree/0",
            callBack: doSubmit
        };
        $.modal.openOptions(options);
    }
    function doSubmit(index, layero){
        var body = $.modal.getChildFrame(index);
        $("#treeId").val(body.find('#treeId').val());
        $("#treeName").val(body.find('#treeName').val());
        $.modal.close(index);
    }
    function refreshData() {
        var day = $("#dateBegin").val();
        var idLabel = $("#treeId").val();
        if(idLabel==null) {
            $.modal.alertWarning("请先选择标签");
            return ;
        }
        $.ajax({
            type: "POST",
            url: "/etl/query/indexWall/query",
            data: JSON.stringify({"startDate":day,"sdSys":$("#sdSys").val(),"name":$("#name").val(),"idLabel":$("#treeId").val(),"dateType":"M"}),
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            success: function(res) {
                var indexHtml ="";
                if(res.code==0) {
                    var nowValue=0,lastValue=0,lastDate,mom,momDes;
                    $("#shapeDiv").html("");
                    day = day.replaceAll("-","");
                    var isChecked = $("#checkboxQuery").is(":checked");
                    var iswarning;
                    $.each(res.data,function (index,item) {
                        iswarning = false;
                        nowValue=0,lastValue=0,mom=0;momDes="";
                        var shapeData = eval('('+item.shapeData+')');
                        if(shapeData!=undefined) {
                            var daysData = shapeData.series[0].data;
                            var days = shapeData.xAxis.data;
                            var style = '';
                            if(days[days.length-1]==day) {
                                if(days.length>1) {
                                    nowValue = daysData[daysData.length-1];
                                }
                                if(days.length>2) {
                                    lastDate = days[days.length-2];
                                    lastValue = daysData[daysData.length-2];
                                    mom = (nowValue-lastValue)/lastValue;
                                    momDes = (Math.abs(mom)*100).toFixed(2)+"%";
                                    if(Math.abs(mom)>0.3) {
                                        iswarning = true;
                                        style = 'style="background-color: yellow;color: green"';
                                    } else if(Math.abs(mom)>1) {
                                        iswarning = true;
                                        style = 'style="background-color: firebrick;color: white"';
                                    }
                                }
                            }
                        }
                        indexHtml = '<div class="col-md-4">\n' +
                            '                <div class="ibox">\n' +
                            '                    <div class="ibox-content">\n' +
                            '                        <div>\n' +
                            '                            <div id="simpleLine'+index+'" class="echarts" style="width:100%;height:250px"></div>\n' +
                            '                        </div>\n' +
                            '                        <div class="row  m-t-sm" '+style+'>\n' +
                            '                            <div class="col-sm-3">\n' +
                            '                                <div class="font-bold">指标</div>'+item.naIndex+
                            '                            </div>\n' +
                            '                            <div class="col-sm-3">\n' +
                            '                                <div class="font-bold">['+day+']值</div>'+nowValue+
                            '                            </div>\n' +
                            '                            <div class="col-sm-3">\n' +
                            '                                <div class="font-bold">['+lastDate+']值</div>\n' +lastValue+
                            '                            </div>\n' +
                            '                            <div class="col-sm-3 text-right">\n' +
                            '                                <div class="font-bold">环比</div>\n' +momDes+
                            '                                <i class="fa fa-level-'+(mom<0?'down':'up')+' text-navy"></i>\n' +
                            '                            </div>\n' +
                            '                        </div>\n' +
                            '\n' +
                            '                    </div>\n' +
                            '                </div>\n' +
                            '            </div>';
                        if(isChecked && !iswarning) { //显示

                        } else {
                            $("#shapeDiv").append(indexHtml);
                            if($("#sevenShow").is(":checked")){
                                var echartsInstance=echarts.init(document.getElementById('simpleLine'+index));
                                echartsInstance.setOption(eval('('+item.shapeData+')'));
                            } else {
                                $("#simpleLine"+index).hide();
                            }
                        }
                    });

                }
            }
        });
    }
    $(function() {
        $("#dateBegin").datetimepicker({
            format: "yyyy-mm",
            startView: 3,
            minView: 3,
            autoclose: true
        });
        debugger;
        $("#dateBegin").val(lastMonth(new Date()));
    });
</script>